<template  >
  <div class="all1">
    <!-- 页头 -->
    <el-container class="allContainer1">
      <el-header class="head1">
        <div class="divHead1"></div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div><div class="topFont1">车辆闸道管理</div></div>
            </div></el-col
          >
          <div class="divBtn1">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="equiAdd"
              >新增</el-button
            >
            <!-- 新增模态框 -->
            <el-dialog
              :visible.sync="dialogAdd"
              @close="closeDialogAdd"
              fullscreen="true"
            >
              <div class="allDialog">
                <div class="eLeft">
                  <div class="mesl">
                    <div class="title1">设备基本信息：</div>
                    <div class="mesl2">
                      <el-form ref="addForm" label-width="80px" size="mini">
                        <el-form-item
                          label="设备名称"
                          :required="true"
                          style="width: 280px"
                          prop="equipmentName"
                        >
                          <el-input
                            v-model="addForm.equipmentName"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="设备编号"
                          :required="true"
                          style="width: 280px"
                          prop="equipmentNum"
                        >
                          <el-input
                            v-model="addForm.equipmentNum"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="设备型号"
                          :required="true"
                          style="width: 280px"
                          prop="equipmentModel"
                        >
                          <el-input
                            v-model="addForm.equipmentModel"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="运行时长"
                          :required="true"
                          style="width: 280px"
                          prop="equipmentTiming"
                        >
                          <el-input
                            v-model="addForm.equipmentTiming"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="运行状态"
                          :required="true"
                          style="width: 280px"
                          prop="runStateId"
                        >
                          <el-select
                            size="mini"
                            v-model="addForm.runStateId"
                            placeholder="请选择"
                            reserve-keyword="true"
                          >
                            <el-option
                              v-for="item in runStates"
                              :key="item.runStateId"
                              :label="item.runStateName"
                              :value="item.runStateId"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="跟进人"
                          :required="true"
                          style="width: 280px"
                          prop="empId"
                        >
                          <el-select
                            size="mini"
                            v-model="addForm.empId"
                            placeholder="请选择"
                            reserve-keyword="true"
                            @change="queryByTel(addForm.empId)"
                          >
                            <el-option
                              v-for="item in admins"
                              :key="item.empId"
                              :label="item.empName"
                              :value="item.empId"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="联系方式" style="width: 280px">
                          <el-input
                            :disabled="true"
                            v-model="sysAdmin.empTel"
                          ></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
                <div class="eRight">
                  <div class="mesr">
                    <div class="title1">设备详细信息：</div>
                    <div class="mesr2">
                      <el-form ref="addForm" label-width="80px" size="mini">
                        <el-form-item
                          label="安装位置"
                          :required="true"
                          style="width: 280px; float: left"
                          prop="equipmentPlace"
                        >
                          <el-input
                            v-model="addForm.equipmentPlace"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="现场照片"
                          :required="true"
                          style="width: 280px; float: left"
                          prop="equipmentFieldimg"
                        >
                          <el-input
                            v-model="addForm.equipmentFieldimg"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="设备照片"
                          :required="true"
                          style="width: 280px; float: left"
                          prop="equipmentImg"
                        >
                          <el-input
                            v-model="addForm.equipmentImg"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>
              <div slot="footer" style="text-align: center">
                <el-button @click="dialogAdd = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
              </div>
            </el-dialog>

            <el-button
              size="mini"
              type="warning"
              icon="el-icon-delete"
              @click="deleteAll"
              >批量删除</el-button
            >
          </div>
        </el-row>
      </el-header>
      <div class="biaoqian1">
        <div style="width: 50%">
          <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
            <el-tab-pane name="first"
              ><div slot="label" @click="topath('/Equi')">
                设备列表
              </div></el-tab-pane
            >
            <el-tab-pane name="second"
              ><div slot="label" @click="topath('/Warning')">
                告警记录
              </div></el-tab-pane
            >
            <el-tab-pane name="third"
              ><div slot="label" @click="topath('/Operation')">
                运维记录
              </div></el-tab-pane
            >
          </el-tabs>
        </div>
      </div>
      <el-main class="bottomMain1">
        <router-view
          :runStates="runStates"
          :admins="admins"
          :sysAdmin="sysAdmin"
          ref="equi"
        ></router-view>
      </el-main>
    </el-container>
  </div>
</template>

  <script>
import Equi from "@/components/Equi.vue";
import Warning from "@/components/Warning.vue";
import Operation from "@/components/Operation.vue";
export default {
  components: { Equi, Warning, Operation },
  data() {
    return {
      sysAdmin: {},
      runStates: [],
      activeName: "first",
      dialogAdd: false,
      addForm: {},
      admins: [],
    };
  },
  methods: {
    deleteAll() {
      this.$axios
        .post("equipments/deleteAll", this.$refs.equi.multipleSelection)
        .then((res) => {
          if (res.data.code == 200) {
            this.$refs.equi.loadEqui();
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    queryByTel(id) {
      this.$axios.get("admins/" + id).then((res) => {
        if (res.data.code == 200) {
          this.sysAdmin = res.data.data.sysAdmin;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    loadAdmin() {
      this.$axios.get("admins").then((res) => {
        if (res.data.code == 200) {
          this.admins = res.data.data.sysAdmins;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    loadState() {
      this.$axios.get("runstates").then((res) => {
        if (res.data.code == 200) {
          this.runStates = res.data.data.runStates;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    topath(path) {
      this.$router.push(path);
    },
    equiAdd() {
      this.dialogAdd = true;
    },
    add() {
      this.$axios.post("equipments", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.dialogAdd = false; //关于dialog
          this.$refs.addForm.resetFields(); //重置form
          this.loadEqui();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
  mounted() {
    this.loadState();
    this.loadAdmin();
  },
};
</script>



  <style>
.all1 {
  width: 100%;
  height: 700px;
  background-color: rgb(240, 242, 245);
}
.allContainer1 {
  width: 98%;
  margin: auto;
}
.head1 {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}
.divHead1 {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}
.topFont1 {
  float: left;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 900;
}
.divBtn1 {
  float: right;
  margin-right: 10px;
}
.bottomMain1 {
  border-radius: 8px;
  width: 100%;
  height: 620px;
  margin: auto;
  margin-top: 5px;
}



.biaoqian1 {
  background-color: white;
  position: relative;
}
.mesl {
  border: 1px solid rgb(43, 41, 41);
  border-radius: 10px;
  width: 99%;
  height: 95%;
}
.mesr {
  border: 1px solid rgb(43, 41, 41);
  border-radius: 10px;
  width: 99%;
  height: 95%;
}
.allDialog {
  border: 0px solid red;
  width: 1000px;
  height: 500px;
  margin-top: -30px;
  margin-left: 180px;
}
.eLeft {
  border: 0px solid red;
  width: 36%;
  height: 100%;
  float: left;
}
.eRight {
  border: 0px solid red;
  width: 60%;
  height: 100%;
  float: right;
}
.mesl2 {
  border: 0px solid red;
  width: 80%;
  height: 85%;
  margin-left: 30px;
  margin-top: 10px;
}
.mesr2 {
  border: 0px solid red;
  width: 95%;
  height: 90%;
  margin-left: 20px;
  margin-top: 10px;
}
.title1 {
  border: 0px solid red;
  width: 100px;
  height: 20px;
  line-height: 17px;
}
</style>
